<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3卡片鼠标悬停滑出分享按钮动画DEMO演示</title>

<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div class="container">
<!-- Team members structure start -->
	<div class="team-members row">
		<!-- effect-1 html -->
		<div class="single-member effect-1">
			<div class="member-image">
				<img src="images/member_140x145.jpg" alt="Member">
			</div>
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="social-touch">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-1 html end -->
		
		<!-- effect-2 html -->
		<div class="single-member effect-2">
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="social-touch">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-2 html end -->
		
		<!-- effect-3 html -->
		<div class="single-member effect-3">
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="social-touch">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-3 html end -->
		
		<!-- effect-4 html -->
		<div class="single-member effect-4">
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
			</div>
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="more-info">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-4 html end -->
		
		<!-- effect-5 html -->
		<div class="single-member effect-5">
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-5 html end -->
		
		<!-- effect-6 html -->
		<div class="single-member effect-6">
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
			<div class="border-green"></div>
		</div>
		<!-- effect-6 html end -->
		
		<!-- effect-7 html -->
		<div class="single-member effect-7">
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
			</div>
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="more-info">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-7 html end -->
		
		<!-- effect-8 html -->
		<div class="single-member effect-8">
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
			</div>
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="more-info">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Lorem ipsum dolor sit amet.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-8 html end -->
		
		<!-- effect-9 html -->
		<div class="single-member effect-9">
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
			</div>
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="more-info">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-9 html end -->
		
	</div>
<!-- Team members structure start -->
</div>

</body>
</html>
